.w {
    width: 100%;
}

/* 横向布局 */
.x {
    display: flex;
    flex-direction: row;
}

/* 纵向布局 */
.y {
    display: flex;
    flex-direction: column;
}

/* 水平居中 */
.spjz {
    display: flex;
    justify-content: center;
}

/* 垂直居中 */
.czjz {
    display: flex;
    align-items: center;
}

/* 水平,垂直居中 */
.spcz {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 纵向均匀分散排列 */
.zxfx {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

/* 纵向均匀分散排列，已开头和末尾为节点 */
.zxfx1 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 横向均匀分散排列 */
.hxfx {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
}

/* 横向均匀分散排列，已开头和末尾为节点 */
.hxfx1 {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

/* 纵向居中 */
.zxjz {
    display: flex;
    flex-direction: column;
    justify-content: center;

}

/* 超出换行 */
.huanhuang {
    display: flex;
    flex-wrap: wrap;
}

/* 滚动事件高度 */
.scroll-y {
    height: 100vh;
}